/*
* 说明：本插件基于jquery
* 传参
*   pElem 父元素的className   如 ".option"
*   cElem 子元素(要拖拽的元素)的className 如 ".option-list"
*   // style1:被拖动的样式 style2:被替换的样式
*/

jQuery.extend({
    KF_drag: function (pElem, cElem, style1, style2) {                
        if ($(pElem).css('position') == 'static') 
            $(pElem).css("position", 'relative');
        $(pElem).on("mousedown", cElem, function (e) {  
            e.stopPropagation();
            console.log($(this).html());
            $body = $(this).parent();
            if($body.find(cElem).length<=1) 
                return;  
            var obj = $(this).clone(true),
                onOff = false,
                cache = $(this),
                HEIGHT = $(this).outerHeight(),
                WIDTH = $(this).outerWidth(),
                MARGIN = $(this).css('margin'),
                XXX = e.pageX - $(this).offset().left,
                YYY = e.pageY - $(this).offset().top,
                tagName = $(this).get(0).tagName.toLowerCase() || 'div';
                console.log(111,obj.html());
            obj.css({'height':HEIGHT,'width':WIDTH, 'position': "absolute", top: $(this).position().top, "left": $(this).position().left });
            $(this).parent().css("position", "relative");
            $(this).replaceWith("<"+tagName+" id='drag-plugin-move-div' style='box-sizing:border-box;border:2px dotted #1F8CEB' ></"+tagName+">");
            $("#drag-plugin-move-div").css({ "height": HEIGHT, "width": WIDTH, 'margin': MARGIN });
            if (style1) {
                $("#drag-plugin-move-div").css(style1);
            }
            if (style2) {
                obj.css(style2);
            }
            obj.addClass("move-template");
            $body.append(obj);
            $(document).on("mousemove.move", function (e) {
                obj.offset({ left: e.pageX - XXX, top: e.pageY - YYY });
                calcLong(false, e);
                return false;
            });
            $(document).on("mouseup.move", function () {
                calcLong(true);
                $(document).off(".move");
            });
            var _this = $("#drag-plugin-move-div");
            function calcLong(onOff, e) {
                $body.find(cElem).not(".move-template").each(function (index, elem) {
                    if (!onOff) { // 鼠标拖动
                        if ($(this).offset().top <= e.pageY &&
                            e.pageY <= $(this).offset().top + $(this).height() &&
                            e.pageX >= $(this).offset().left &&
                            e.pageX <= $(this).offset().left + $(this).width()
                        ) {
                            if (_this.index() < $(this).index()) {
                                _this.remove().insertAfter($(this));
                            } else if (_this.index() > $(this).index()) {
                                _this.remove().insertBefore($(this));
                            };
                        }
                    } else { // 松开鼠标
                        obj.remove();
                        _this.replaceWith(cache);
                        return false;
                    }
                });
            };
        })
    }
});
$.KF_drag("父元素","被拖动的元素","被拖动的样式","被替换元素的样式")